<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简约文字头像生成器</title>
  <style>
    .flex {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
    }
    .flex-direction-column {
      flex-direction: column;
    }
    .flex-center {
      display: flex;
      justify-content: center;
    }
    .flex-items-center {
      display: flex;
      align-items: center;
    }
    .label-span {
      flex: 0 0 32%;
      font-size: 15px;
    }
  </style>
</head>
<body>
<div id="app">

<div class="flex-center" style="margin-top: 30px;">
<div class="flex flex-direction-column">
  <div>
    <card style="min-width: 200px; width: 300px; max-width: 300px;">
      <div style="display: flex; justify-content: center;" slot="title">
        <canvas id="cav" width="150" height="150"></canvas>
      </div>
      <div class="flex flex-direction-column">
        <div class="flex-items-center">
          <span class="label-span">字体(慎改)</span>
          <i-input v-model="font"></i-input>
        </div>
        <div class="flex-items-center">
          <span class="label-span">图像大小</span>
          <i-input v-model="size" style="flex: 1;"></i-input>
        </div>
        <div class="flex-items-center">
          <span class="label-span">字体大小</span>
          <i-input v-model="fontSize" style="flex: 1;"></i-input>
        </div>
        <div class="flex-items-center">
          <span class="label-span">文字上边距</span>
          <i-input v-model="textAlignTop" style="flex: 1;"></i-input>
        </div>
        <div class="flex-items-center">
          <span class="label-span">文字左边距</span>
          <i-input v-model="textAlignLeft" style="flex: 1;"></i-input>
        </div>
        <div class="flex-items-center">
          <span class="label-span">文字内容</span>
          <i-input v-model="name" style="flex: 1;"></i-input>
        </div>

        <div class="flex-items-center">
          <span class="label-span">文字加粗</span>
          <i-switch v-model="bold" @on-change="draw" />
        </div>

        <div class="flex-items-center">
          <span class="label-span">背景色:</span>
          <color-picker v-model="bgColor" @on-change="draw" />
        </div>
        <div class="flex-items-center">
          <span class="label-span">字体色:</span>
          <color-picker v-model="fontColor" @on-change="draw" />
        </div>
        <i-button type="primary" @click="draw">重绘</i-button>
        <i-button type="primary" @click="downLoad" style="margin-top: 5px;">下载</i-button>
      </div>
    </card>
  </div>
</div>
</div>

</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/styles/iview.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/iview.js"></script>
<script>
const vm = new Vue({
  el: '#app',
  data: {
    bgColor: '#000000',
    fontColor: '#FFFFFF',
    name: 'true',
    ctx: null,
    fontSize: 12,
    font: "Consolas, 'Courier New'",
    textAlignLeft: 60,
    textAlignTop: 80,
    bold: true,
    size: 150,
    canvas: null
  },

  methods: {
    context: function() {
      const canvas = document.querySelector('#cav')
      this.canvas = canvas
      const ctx = canvas.getContext('2d')
      return ctx
    },

    draw: function() {
      this.canvas.width = this.size
      this.canvas.height = this.size

      const c = this.ctx
      let font = `${this.fontSize}px ${this.font}`
      if(this.bold) {
        font = 'bold ' + font
      }

      this.fillBackground('#FFFFFF')
      this.fillText(font)
    },

    fillBackground: function() {
      this.ctx.fillStyle = this.bgColor
      this.ctx.fillRect(0, 0, this.size, this.size)
    },

    fillText: function(font) {
      this.ctx.font = font
      this.ctx.fillStyle = this.fontColor
      const left = this.textAlignLeft
      this.ctx.fillText(this.name, left, this.textAlignTop, this.size - left * 2)
    },
    downLoad: function() {
      const url = this.canvas.toDataURL()
      const oA = document.createElement("a")
      oA.download = `${this.name}.png`
      oA.href = url
      document.body.appendChild(oA)
      oA.click()
      oA.remove()
    }
  },

  mounted: function() {
    this.ctx = this.context()
    this.draw()
  }
})
</script>
</html>
